---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Rotating and controllable marker
description: Simulate a flight path from vehicle data. Use your left and right arrow keys to change direction.
tags:
  - markers
  - animation
---
<div id='map'></div>

<script>
// MIT-licensed code by Benjamin Becquet
// https://github.com/bbecquet/Leaflet.PolylineDecorator
L.RotatedMarker = L.Marker.extend({
  options: { angle: 0 },
  _setPos: function(pos) {
    L.Marker.prototype._setPos.call(this, pos);
    if (L.DomUtil.TRANSFORM) {
      // use the CSS transform rule if available
      this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
    } else if (L.Browser.ie) {
      // fallback for IE6, IE7, IE8
      var rad = this.options.angle * L.LatLng.DEG_TO_RAD,
      costheta = Math.cos(rad),
      sintheta = Math.sin(rad);
      this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
        costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
    }
  }
});
L.rotatedMarker = function(pos, options) {
    return new L.RotatedMarker(pos, options);
};

var map = L.mapbox.map('map', 'mapbox.emerald', {
    keyboard: false
}).setView([37.9, -77],4);

var marker = L.rotatedMarker(new L.LatLng(37.9, -77), {
  icon: L.divIcon({
    className: 'svg-marker',
    html: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path d="M15 6.818V8.5l-6.5-1-.318 4.773L11 14v1l-3.5-.682L4 15v-1l2.818-1.727L6.5 7.5 0 8.5V6.818L6.5 4.5v-3s0-1.5 1-1.5 1 1.5 1 1.5v2.818l6.5 2.5z"/></svg>',
    iconSize: [24, 24],
  }),
  draggable: true
});

marker.addTo(map);

var direction = 0, manual = false;

window.setInterval(function() {
  var ll = marker.getLatLng();
  ll.lat += Math.cos(direction) / 100;
  ll.lng += Math.sin(direction) / 100;
  marker.options.angle = direction * (180 / Math.PI);
  marker.setLatLng(ll);
  if (!manual && Math.random() > 0.95) {
    direction += (Math.random() - 0.5) / 2;
  }
}, 10);

// Add manual control of the airplane with left and right arrow keys, just because
document.body.addEventListener('keydown', function(e) {
  if (e.which == 37) {
    direction -= 0.1; manual = true;
  }
  if (e.which == 39) {
    direction += 0.1; manual = true;
  }
}, true);
</script>
